<template>
<!--首页/-->
  <div v-loading="loading" style="width: 100vw;height: 100vh;">
    <top :title="title" />
    <el-row>
      <div class="index-top">
        <span style="font-weight: bold;font-size: 2rem;text-shadow: 0 0 5px black;">家校共育，立德树人</span>
      </div>
    </el-row>
    <el-row>
      <div class="index-info">
        <div class="info-left">
          <p class="info-title" align="left">{{ importantInfo.title }}</p>
          <p class="info-content" align="left">{{ importantInfo.content }}</p>
        </div>
        <div class="info-right">
          <img :src="importantInfo.img" style="width: 30vw; height: auto" alt="">
        </div>
      </div>
    </el-row>
    <el-row>
      <div class="index-box">
        <div class="index-box-item" v-for="(item, index) in bannerList" :key="index" @click="goToPage(item.url)">
          <img v-if="index!==11" :src="item.img" alt="" style="width: 8vw; height: auto">
          <img v-else :src="item.img" alt="" style="width: auto; height: 5.3vh">
          <span style="margin-top: 1.2vh;">{{ item.title }}</span>
        </div>
      </div>
    </el-row>
    <el-row>
      <div class="index-swiper">
        <div class="wrap">
          <div class="content">
            <p>欢迎{{ userInfo.name }}家长</p>
            <p>崇德 尚用 求真 创新</p>
          </div>
        </div>
      </div>
    </el-row>
<!--    底部-->
    <el-row>
<!--      占位-->
      <div style="width: 100vw;height:10vh"/>
    </el-row>
    <el-row>
      <bottom :selectIndex="0"></bottom>
<!--      <div class="index-bottom">-->
<!--          <div class="bottom-item"></div>-->
<!--      </div>-->
    </el-row>
  </div>
</template>

<script>
import bottom from '@/components/bottom'
import top from '@/components/top'
export default {
  name: 'index',
  data () {
    return {
      loading: false,
      importantInfo: {
        title: '2020-2021年度田径运动会',
        content: '已于9月8日开始，您可以进入本专题进行查看',
        img: require('../assets/运动会.jpg')
      },
      bannerList: [
        {
          img: require('../assets/成绩查询 (1).png'),
          title: '成绩查询',
          url: 'grade'
        }, {
          img: require('../assets/专业信息.png'),
          title: '专业信息',
          url: null
        }, {
          img: require('../assets/寝室号.png'),
          title: '寝室信息',
          url: null
        }, {
          img: require('../assets/荣誉 (1).png'),
          title: '荣誉信息',
          url: null
        }, {
          img: require('../assets/课堂学习 (1).png'),
          title: '课堂学习',
          url: null
        }, {
          img: require('../assets/缴费信息2.png'),
          title: '缴费信息',
          url: null
        }, {
          img: require('../assets/意见反馈平台.png'),
          title: '反馈信息',
          url: 'feedback'
        }, {
          img: require('../assets/违纪处分.png'),
          title: '处分情况',
          url: 'punishment'
        }, {
          img: require('../assets/课外活动.png'),
          title: '课外活动',
          url: 'activity'
        }, {
          img: require('../assets/ic_学生课表查询.png'),
          title: '学生课表',
          url: null
        }, {
          img: require('../assets/考试信息.png'),
          title: '课程信息',
          url: null
        }, {
          img: require('../assets/综测管理.png'),
          title: '综测信息',
          url: null
        }
      ],
      userInfo: this.$store.state.usrInfo,
      title: '浙科学工系统'
    }
  },
  methods: {
    goToPage (item) {
      if (item !== null) {
        this.$router.push(item)
      }
    }
  },
  components: {
    bottom,
    top
  }
}
</script>

<style lang="stylus" scoped>
.index-banner
  width: 100vw
  height: 8vh
  background: rgba(56, 136, 255, 1)
  color:black
  letter-spacing 2px
  text-align center
  line-height 8vh
  font-size: 1.4rem

.index-top
  width: 100vw
  height: 24vh
  background-image: url('../assets/浙科11.jpg')
  background-size: 100% 100%
  border-bottom-left-radius: 30px
  border-bottom-right-radius: 30px
  display flex
  justify-content center
  align-items center
  color white
.index-info
  width: 84vw
  height: 16vh
  margin: -5vh auto
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) -87%, #FFFFFF 100%);
  border-radius:10px
  display:flex
  flex-direction:row
  justify-content flex-start
  align-items flex-start
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25)
  //position:absolute
.info-left
  width: 58vw
  height: 16vh
  margin-right: 2vw
  display flex
  flex-direction column
  justify-content flex-start
.info-title
  font-weight:bold
  font-size:0.9rem
  margin-top: 1vh
  margin-left: 4vw
.info-content
  font-weight: lighter;
  width: 44vw
  font-size:0.7rem
  margin-left: 4vw
  margin-top: 1vh
  display: -webkit-box
  -webkit-box-orient: vertical
  -webkit-line-clamp: 5
  overflow: hidden
  letter-spacing 0.4vw

.info-right
  width: 40vw
  height: 16vh
  display flex
  justify-content center
  align-items center

.index-box
  width: 84vw
  height: auto
  background: white
  margin: 8vh auto
  border-radius 10px
  padding-top: 1vh
  padding-bottom: 1vh
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  display flex
  justify-content center
  align-items center
  flex-flow:row wrap;
  margin-bottom: 4vh

.index-box-item
  width: 26vw
  height: 12vh
  display flex
  flex-direction column
  justify-content center
  align-items center
.index-bottom
  width: 100vw
  height:10vh
  background: white
  position:fixed
  top:90vh
  //box-shadow: 10px 2px 4px rgba(0, 0, 0, 0.25);
  //bottom: 20vh
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
.index-swiper
  width: 84vw
  height: 6vh
  background: white
  margin-bottom: 2vh
  margin 0 auto
  //border-radius 20px
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  display flex
  align-items center
  justify-content center
.wrap{height:30px;overflow: hidden;position: absolute;top:30;left: 100;width: 100%}
  p{margin:0;height: 30px;width: 100%}
.content p{
  position: absolute;
}
@-webkit-keyframes anim1{
  0% {top: 30px;opacity: 1}
  50% {top: -30px;opacity: 1}
  75% {top: -30px ;opacity: 0}
  100%{top:30px;opacity: 0}
}
@-webkit-keyframes anim2{

  0% {top: -30px;opacity: 0}
  25% {top: 30px;opacity: 0}
  50% {top: 30px;opacity: 1}
  100%{top: -30px;opacity: 1}
}
.content p:nth-child(1){

  -webkit-animation: anim1 2s linear infinite;
}

.content p:nth-child(2){

  -webkit-animation: anim2 2s linear infinite;
}
</style>
